<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
button{}
div{display:none;width:200px;height:300px;background:red;}
.button_on{background:blue;}
.div_on{display:block;}




	</style>

</head>
<body>
	<button class="button_on">哈哈</button>
	<button>嘿嘿</button>
	<button>呵呵</button>
	<div class="div_on">a</div>
	<div>b</div>
	<div>c</div>
</body>
</html>
<script type="text/javascript">
		
var oButton = document.getElementsByTagName('button');
var oDiv = document.getElementsByTagName('div');

count = oButton.length;

for(var i = 0;i < count;i++) {
	oButton[i].index = i;
	oButton[i].onmouseover = function() {
		for(var j = 0;j < count;j++) {
			oButton[j].className = '';
			oDiv[j].className = '';
		}
		this.className = 'button_on';
		// this.index = i;
		oDiv[this.index].className = 'div_on';
	}
	



}
	
</script>